<!-- 巡查分类编辑弹窗 -->
<template>
  <el-dialog
      :title="data.name"
      :visible="visible"
      width="80%"
      :destroy-on-close="true"
      :lock-scroll="false"
      @update:visible="updateVisible">
    <ele-pro-table
        ref="table"
        :where="where"
        :datasource="url"
        :columns="columns"
        need-page
        height="calc(100vh - 360px)">
      <!-- 表头工具栏 -->
      <template slot="toolbar">
        <el-button
            size="small"
            type="primary"
            icon="el-icon-plus"
            class="ele-btn-icon"
            @click="add">
          添加规则
        </el-button>
      </template>
      <template slot="module">
        {{ data.module || data.name }}
      </template>
      <template slot="level">
        <el-tag v-if="!data.level" type="success" size="small">顶级</el-tag>
        <el-tag v-if="data.level === 1" type="success" size="small">一级</el-tag>
        <el-tag v-if="data.level === 2" type="success" size="small">二级</el-tag>
        <el-tag v-if="data.level === 3" type="success" size="small">三级级</el-tag>
      </template>
      <template slot="name">
        {{ data.name }}
      </template>
      <template slot="cycle" slot-scope="{row}">
        <el-select v-if="form.id === row.id" v-model="form.cycle" filterable class="ele-fluid">
          <el-option v-for="item in cycleOption" :key="item.id" :label="item.name" :value="item.id"/>
        </el-select>
        <template v-else>{{ cycleOption[row.cycle - 1].name }}</template>
      </template>
      <template slot="compare" slot-scope="{row}">
        <el-select v-if="form.id === row.id" v-model="form.compare" filterable class="ele-fluid">
          <el-option v-for="item in compareOption" :key="item.id" :label="item.name" :value="item.id"/>
        </el-select>
        <template v-else>{{ compareOption[row.compare - 1].name }}</template>
      </template>
      <template slot="condition" slot-scope="{row}">
        <template v-if="form.id === row.id">
          <el-input v-if="form.compare !== 6" v-model="form.condition" type="number" min="0" max="100"/>
          <div v-else style="display: flex;align-items: center">
            <el-input v-model="form.condition[0]" type="number" min="0" max="100"/>
            -
            <el-input v-model="form.condition[1]" type="number" min="0" max="100"/>
          </div>
        </template>
        <template v-else>{{ row.condition }}</template>
      </template>
      <template slot="feedback" slot-scope="{row}">
        <el-input v-if="form.id === row.id" v-model="form.feedback" :rows="2" clearable  type="textarea" :maxlength="100"/>
        <template v-else>{{ row.feedback }}</template>
      </template>
      <template slot="action" slot-scope="{row}">
        <el-button v-if="form.id === row.id" :loading="loading" type="primary" size="mini" @click="save">保存</el-button>
        <template v-else>
          <el-link type="primary" :underline="false" @click="edit(row)">修改</el-link>
          <el-popconfirm class="ele-action" title="确定要删除此规则吗？" @confirm="remove(row)">
            <el-link slot="reference" type="danger" :underline="false" icon="el-icon-delete">删除</el-link>
          </el-popconfirm>
        </template>
      </template>
    </ele-pro-table>
  </el-dialog>
</template>

<script>

export default {
  props: {
    visible: Boolean,
    data: Object
  },
  data() {
    return {
      url: '/early_warning/rule',
      where: {id: this.data.id},
      columns: [
        {
          type: 'index',
          label: '序号',
          width: 60,
          fixed: 'left',
          align: 'center',
        }, {
          slot: 'module',
          label: '模块',
          width: 100,
          align: 'center',
        }, {
          slot: 'level',
          label: '类型等级',
          width: 80,
          align: 'center',
        }, {
          slot: 'name',
          label: '类型名称',
          width: 120,
          align: 'center',
        }, {
          slot: 'cycle',
          label: '维度',
          width: 120,
          align: 'center',
        }, {
          slot: 'compare',
          label: '计算',
          width: 100,
          align: 'center',
        }, {
          slot: 'condition',
          label: '条件',
          width: 160,
          align: 'center',
        }, {
          slot: 'feedback',
          label: '反馈',
          minWidth: 120,
          align: 'center',
        }, {
          slot: 'action',
          label: '操作',
          width: 120,
          align: 'center',
        }
      ],
      cycleOption: [
        {id: 1, name: '日环比'},
        {id: 2, name: '周环比'},
        {id: 3, name: '月环比'}
      ],
      compareOption: [
        {id: 1, name: '>'},
        {id: 2, name: '>='},
        {id: 3, name: '<'},
        {id: 4, name: '<='},
        {id: 5, name: '='},
        {id: 6, name: '介于'}
      ],
      form: {
        id: 0,
        cycle: 1,
        compare: 1,
        condition: 1,
        feedback: '',
      },
      loading: false
    }
  },
  watch: {
    'form.compare': {
      handler(val) {
        if (val === 6) {
          this.form.condition = [1, 2]
        } else {
          this.form.condition = 1
        }
      },
      immediate: true
    }
  },
  methods: {
    add() {
      const data = this.$refs.table.data
      if (!data.length || data[0].id !== 0) {
        this.form = {
          id: 0,
          exception_category: this.data.id,
          cycle: 1,
          compare: 1,
          condition: 1,
          feedback: '',
        }
        this.$refs.table.data.unshift(this.form)
      }
    },
    edit(item) {
      this.form = item
    },
    remove(item) {
      const loading = this.$loading({lock: true});
      this.$http.post('/early_warning/ruleDelete', {id: item.id}).then(res => {
        loading.close()
        if (res.data.code === 0) {
          this.$message.success(res.data.msg)
          this.$refs.table.reload()
        } else {
          this.$message.error(res.data.msg)
        }
      }).catch(e => {
        loading.close()
        this.$message.error(e.message)
      })
    },
    save() {
      this.loading = true
      this.$http.post('/early_warning/ruleSave', this.form).then(res => {
        this.loading = false
        if (res.data.code === 0) {
          this.form = {
            id: 0,
            exception_category: this.data.id,
            cycle: 1,
            compare: 1,
            condition: 1,
            feedback: '',
          }
         this.$refs.table.reload()
        } else {
          this.$message.error(res.data.msg)
        }
      }).catch(e => {
        this.loading = false;
        this.$message.error(e.message)
      });
    },
    updateVisible(value) {
      this.$emit('update:visible', value)
    }
  }
}
</script>

<style scoped>
</style>
